import * as echarts from 'echarts';
import {china} from "@/utils/china";
import React from 'react';
import ReactECharts from 'echarts-for-react';
import EChartsReact from 'echarts-for-react';
import { useRef, } from 'react';
import CardChart, { ChartData, ChartType } from '@/components/CardChart';
import { staContactsProvince } from '@/services/api/contacts';
const displaycontactVOArray = await staContactsProvince();
echarts.registerMap('map', china);
echarts.registerMap("china", china, {}); 
export default () => {
  let datalist: ChartData[] = displaycontactVOArray?.map((item: any) => ({
    name: item.province,
    value: item.num,
  }))|| [];
  let curRef = useRef(null);
  let height = window.screen.availHeight
  let option = {
    title: {
      text: '全国地图',
         textStyle: {
         color: "#000",
              },
              left: 'center',
          },
        visualMap: {
          left: 'right',
          min: Math.min(...datalist.map(item => item.value)),
          max: Math.max(...datalist.map(item => item.value)),
          inRange: {
            //热力图的颜色
            color: ['rgba(0,255,0,0.1)','rgba(255,255,0,0.7)', 'rgba(255,0,0,1)']
          },
          text: ['人数多', '人数少'], //High表示省份人数多，Low表示省份人数少
          calculable: true
        },

          series: [
              {
                  name: '地图',
                  type: 'map',
                  mapType: 'china',
                  scaleLimit: {
                      //滚轮缩放的极限控制
                      min: 0.5, //缩放最小大小
                      max: 10, //缩放最大大小
                  },
                  data: datalist,
                  emphasis: {
                    areaColor: "#184cff",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 5,
                    borderWidth: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  },
                  label: { // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                      show: true, //显示省市名称
                      position: [1, 100], // 相对的百分比
                      fontSize: 12,
                      offset: [2, 0], // 是否对文字进行偏移。默认不偏移。例如：`[30, 40]` 表示文字在横向上偏移 `30`，纵向上偏移 `40`。
                      align: "left", // 文字水平对齐方式，默认自动。
                      formatter: function(params: any) {
                        let label = "0";
                        let name = params.name;
                        for(let i = 0; i < datalist.length; i++) {
                          if(datalist[i].name === params.name) {
                            label = datalist[i].value.toString();
                            break;
                          }
                        }
                        label = name + ":" + label;

                        return label;
                      }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: "#F5F5DC",
                      borderColor: "#CDCDB4",
                      borderWidth: 0.5
                    },
                    emphasis: {
                      areaColor: "#EEEEE0",
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 5,
                      borderWidth: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  },
                  roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 `'scale'` 或者 `'move'`。设置成 `true` 为都开启
                  zoom: 1.25, // 当前视角的缩放比例
              }
          ]
        }
      return <div className='bazaarMap'>
          <EChartsReact option={option} ref={curRef} style={{ width: '100%', height: height, zIndex: 222 }}
              lazyUpdate={true} notMerge={true} onEvents={{
                  'click': (param: any) => {//echarts点击事件
                    if (param.name) {//判断名称是否为空
                      const echartInstance = curRef.current.getEchartsInstance();//获取echarts实例
                      let options = echartInstance.getOption()//获取option
                      let provinceJSON = null
                        try {
                            provinceJSON = require(`@/assets/MapJson/${param.name}.json`);//根据点击的省名称查询Geojson地图数据（我是将地图数据全部保存在本地，可根据API获取地图json）
                            echarts.registerMap('map', provinceJSON);//注册点击的省份地图
                       
                                                   options.title[0].text = param.name + '地图'
                                                   options.series[0].name = param.name + '地图'
                                                   
                                                   // options.series[0].center = china.features.find(item => item.properties.name === param.name)?.properties?.center//修改点击后地图中心位置，不用会存在偏移，我使用下边null,默认全局居中
                                                   options.series[0].center = null;//修改点击后地图中心位置，null默认全局居中
                                               echartInstance.setOption(options, true)//修改echarts option
                                               } catch (error) {
                                                   options.title[0].text = '全国地图'
                                                   echarts.registerMap('map', china);
                                                   options.series[0].name = '全国地图'
                                                   
                                                   options.series[0].center = null
                                                   echartInstance.setOption(options, true)
                                               }
                                           }
                                       },
                                   }} />
                           </div>}



